<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 引用模板 Header -->
    <div th:insert="bg/publicHead :: publicHead"></div>
    <!-- [ Header ] end -->

    <style type="text/css">
        .contain{ width:800px; margin:0 auto;  }
        .contain .nav{ display:flex; justify-content:center; align-items:center; border-bottom:1px solid #f1f1f1; }
        .contain .nav div{ width:19%; height:38px; display:flex; justify-content:center; align-items:center; cursor: pointer; }
        .contain .nav .selected{ background:#0099ff; color: #FFF; }
        .bodyDate{ box-sizing:border-box; width:700px; margin:0 auto; margin-top:20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f1f1f1;  }
    </style>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>
    <script th:inline="javascript">
        window.onerror=function(){return true;};
        var reg=/^1((34[0-8]\d{7})|((3[0-3|5-9])|(4[5-7|9])|(5[0-3|5-9])|(66)|(7[2-3|5-8])|(8[0-9])|(9[1|8|9]))\d{8})$/
        var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
        var curVal="";
        $(document).ready(function() {
            function hidden(){
                $(".bodyDate").css("display","none");
            }
            $(".nav div").click(function(){
                $(".nav div").removeClass("selected");
                $(this).addClass("selected");
                curVal=$(this).text();
                //alert(curVal);
                hidden();
                if(curVal==='血氧'){
                    $(".bloodoxygens").css("display","flex");
                }
                if(curVal==='心率'){
                    $(".hearts").css("display","flex");
                }
                if(curVal==='血压'){
                    $(".bloods").css("display","flex");
                }
                if(curVal==='步数'){
                    $(".steps").css("display","flex");
                }
                if(curVal==='睡眠'){
                    $(".sleeps").css("display","flex");
                }
            });
        });
    </script>
</head>


<body style="background:none;">
<!-- [ Main Content ] start -->
<div class="contain">
    <div class="nav">
        <div class="selected">血氧</div>
        <div>心率</div>
        <div>血压</div>
        <div>步数</div>
        <div>睡眠</div>
    </div>
    <!--<div th:text="${healthsdata.bloodoxygens}"></div>-->
    <div class="bodyDate bloodoxygens" th:if="${bloodoxygensData!=null}"  th:each="item:${bloodoxygensData}">
        <div>血氧值: <span th:text="${item.spo2}"></span></div>
        <div th:text="${item.date}"></div>
    </div>
    <div class="bodyDate hearts" style="display:none;" th:if="${heartsData!=null}"  th:each="item:${heartsData}">
        <div>心率值: <span th:text="${item.bmp}"></span></div>
        <div th:text="${item.date}"></div>
    </div>
    <div class="bodyDate bloods" style="display:none;" th:if="${bloodsData!=null}"  th:each="item:${bloodsData}">
        <div>血压值: <span th:text="${item.bpd}"></span>/<span th:text="${item.bps}"></span>/<span th:text="${item.beat}"></span></div>
        <div th:text="${item.date}"></div>
    </div>
    <div class="bodyDate steps" style="display:none;" th:if="${stepsData!=null}"  th:each="item:${stepsData}">
        <div>步数值: <span th:text="${item.step}"></span>步/<span th:text="${item.distance}"></span>距离/<span th:text="${item.calorie}"></span>卡路里</div>
        <div th:text="${item.date}"></div>
    </div>
    <div class="bodyDate sleeps" style="display:none;" th:if="${sleepsData!=null}"  th:each="item:${sleepsData}">
        <div>深睡: <span th:text="${item.deep_sleep}"></span>小时/浅睡: <span th:text="${item.light_sleep}"></span>小时</div>
        <div th:text="${item.date}"></div>
    </div>
</div>
<!--中间 End -->
</body>



</html>